<template>
  <div class="company-form-container">
    <el-form
      ref="companyForm"
      :model="form"
      :rules="rules"
      label-width="180px"
      label-position="right"
      size="medium"
    >

      <!-- 基础信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司名称" prop="company_name">
              <el-input v-model="form.company_name" placeholder="请输入公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告编号" prop="report_no">
              <el-input v-model="form.report_no" placeholder="请输入报告编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生成日期" prop="report_time">
              <el-date-picker
                v-model="form.report_time"
                type="date"
                placeholder="选择日期"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工人数" prop="staff_num">
              <el-input-number v-model="form.staff_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 注册信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>注册信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册资金(万元)" prop="reg_money">
              <el-input-number
                v-model="form.reg_money"
                :min="0"
                :precision="2"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税类型" prop="tax_type">
              <el-radio-group v-model="form.tax_type">
                <el-radio :label="1">小规模</el-radio>
                <el-radio :label="2">一般纳税人</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册地区" prop="reg_area_code">
              <el-cascader
                v-model="form.reg_area_code"
                :options="areaOptions"
                :props="cascaderProps"
                @change="regAreaCode"
                placeholder="请选择注册地区"
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册地址" prop="reg_address">
              <el-input v-model="form.reg_address" placeholder="请输入注册地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册登记机关" prop="reg_org">
              <el-input v-model="form.reg_org" placeholder="请输入注册登记机关"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册信用代码" prop="reg_no">
              <el-input v-model="form.reg_no" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册开始日期" prop="reg_from_date">
              <el-date-picker
                v-model="form.reg_from_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册结束日期" prop="reg_to_date">
              <el-date-picker
                v-model="form.reg_to_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="注册法人" prop="reg_person">
          <el-input v-model="form.reg_person" placeholder="请输入注册法人姓名"></el-input>
        </el-form-item>

        <el-form-item label="注册经营范围" prop="reg_fan_wei">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.reg_fan_wei"
            placeholder="请输入经营范围"
          ></el-input>
        </el-form-item>
      </el-card>

      <!-- 人员配置 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>人员配置</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="管理人员" prop="manager_num">
              <el-input-number v-model="form.manager_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售人员" prop="sale_num">
              <el-input-number v-model="form.sale_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产人员" prop="make_num">
              <el-input-number v-model="form.make_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="设计师人数" prop="designer_num">
              <el-input-number v-model="form.designer_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门" prop="department">
              <el-input v-model="form.department" placeholder="请输入部门"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 企业概况 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>企业概况</span>
        </div>
        <el-form-item label="企业概述" prop="company_content">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.company_content"
            placeholder="请输入企业概述"
          ></el-input>
        </el-form-item>

        <el-form-item label="企业使命" prop="company_mission">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.company_mission"
            placeholder="请输入企业使命"
          ></el-input>
        </el-form-item>

        <el-form-item label="产品图片" prop="goods_img">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-card>

      <!-- 经营信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>经营信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经营模式" prop="manage_type">
              <el-radio-group v-model="form.manage_type">
                <el-radio :label="1">生产型</el-radio>
                <el-radio :label="2">贸易型</el-radio>
                <el-radio :label="3">混合型</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营面积(㎡)" prop="manage_place_area">
              <el-input-number v-model="form.manage_place_area" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="办公场所类型" prop="manage_place_type">
              <el-radio-group v-model="form.manage_place_type">
                <el-radio :label="1">租赁</el-radio>
                <el-radio :label="2">自有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营地区" prop="manage_place_code">
              <el-cascader
                v-model="form.manage_place_code"
                :options="areaOptions"
                :props="cascaderProps"
                @change="managePlaceCode"
                placeholder="请选择经营地区"
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="经营地址" prop="manage_place_address">
          <el-input v-model="form.manage_place_address" placeholder="请输入经营地址"></el-input>
        </el-form-item>

        <el-form-item label="经营图片" prop="manage_img">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-card>

      <!-- 生产信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>生产信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工厂性质" prop="make_type">
              <el-radio-group v-model="form.make_type">
                <el-radio :label="1">自有工厂</el-radio>
                <el-radio :label="2">代工厂</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂房面积(㎡)" prop="area">
              <el-input-number v-model="form.area" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="厂房使用类型" prop="make_place_type">
              <el-radio-group v-model="form.make_place_type">
                <el-radio :label="1">租赁</el-radio>
                <el-radio :label="2">自有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂房地区" prop="make_place_code">
              <el-cascader
                v-model="form.make_place_code"
                :options="areaOptions"
                :props="cascaderProps"
                @change="makePlaceCode"
                placeholder="请选择厂房地区"
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="厂房详细地址" prop="make_place_address">
          <el-input v-model="form.make_place_address" placeholder="请输入厂房详细地址"></el-input>
        </el-form-item>

        <el-form-item label="生产图片" prop="make_img">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="常规设备数量" prop="normal_device_num">
              <el-input-number v-model="form.normal_device_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅助设备数量" prop="other_device_num">
              <el-input-number v-model="form.other_device_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备总数" prop="device_num">
              <el-input-number
                v-model="form.device_num"
                :min="0"
                :controls="false"
                disabled
              >
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 代工能力 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>代工能力</span>
        </div>
        <el-form-item label="外贸代工经验" prop="power_wai_mao">
          <el-input v-model="form.power_wai_mao" placeholder="请输入外贸代工经验"></el-input>
        </el-form-item>

        <el-form-item label="品牌代工经验" prop="power_pin_pai">
          <el-input v-model="form.power_pin_pai" placeholder="请输入品牌代工经验"></el-input>
        </el-form-item>

        <el-form-item label="代工品牌名称" prop="power_dai_gong_pin_pai">
          <el-input v-model="form.power_dai_gong_pin_pai" placeholder="请输入代工品牌名称"></el-input>
        </el-form-item>

        <el-form-item label="代工品牌信息" prop="power_dai_gong_pin_pai_msg">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.power_dai_gong_pin_pai_msg"
            placeholder="请输入代工品牌详细信息"
          ></el-input>
        </el-form-item>

        <el-form-item label="代工模式" prop="dai_gong_type">
          <el-input v-model="form.dai_gong_type" placeholder="请输入代工模式"></el-input>
        </el-form-item>

        <el-form-item label="加工方法" prop="dai_gong_make_type">
          <el-input v-model="form.dai_gong_make_type" placeholder="请输入加工方法"></el-input>
        </el-form-item>
      </el-card>

      <!-- 开发能力 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>开发能力</span>
        </div>
        <el-form-item label="设计外包能力" prop="develop_design">
          <el-input v-model="form.develop_design" placeholder="请输入设计外包能力"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年平均新款数量" prop="develop_new_num">
              <el-input-number v-model="form.develop_new_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="1-5年开发人数" prop="develop_1_5_num">
              <el-input-number v-model="form.develop_1_5_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="6-10年开发人数" prop="develop_6_10_num">
              <el-input-number v-model="form.develop_6_10_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="10年以上开发人数" prop="develop_10_99_num">
          <el-input-number v-model="form.develop_10_99_num" :min="0" :controls="false"></el-input-number>
        </el-form-item>

        <el-form-item label="自主打样能力" prop="da_yang_can">
          <el-input v-model="form.da_yang_can" placeholder="请输入自主打样能力"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="打样周期" prop="da_yang_time">
              <el-input v-model="form.da_yang_time" placeholder="请输入打样周期"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打样师傅" prop="da_yang_person">
              <el-input-number v-model="form.da_yang_person" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 质量信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>质量信息</span>
        </div>
        <el-form-item label="质量质检配置" prop="zhi_liang_check">
          <el-input v-model="form.zhi_liang_check" placeholder="请输入质量质检配置"></el-input>
        </el-form-item>

        <el-form-item label="质检类型" prop="zhi_liang_check_type">
          <el-radio-group v-model="form.zhi_liang_check_type">
            <el-radio :label="1">自检</el-radio>
            <el-radio :label="2">第三方检测</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产流水线" prop="making_line_num">
              <el-input-number v-model="form.making_line_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年生产能力" prop="making_year_num">
              <el-input-number v-model="form.making_year_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="卫生状况" prop="making_wei_sheng">
          <el-input v-model="form.making_wei_sheng" placeholder="请输入卫生状况"></el-input>
        </el-form-item>

        <el-form-item label="照明" prop="making_zhao_ming">
          <el-input v-model="form.making_zhao_ming" placeholder="请输入照明情况"></el-input>
        </el-form-item>

        <el-form-item label="工艺" prop="making_gong_yi">
          <el-input v-model="form.making_gong_yi" placeholder="请输入工艺水平"></el-input>
        </el-form-item>
      </el-card>

      <!-- 客户信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>客户信息</span>
        </div>
        <el-form-item label="合作客户" prop="customer_name">
          <el-input v-model="form.customer_name" placeholder="请输入合作客户名称"></el-input>
        </el-form-item>

        <el-form-item label="合作客户类型" prop="customer_name_type">
          <el-radio-group v-model="form.customer_name_type">
            <el-radio :label="1">电商客户</el-radio>
            <el-radio :label="2">纯线下客户</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="合作品类" prop="customer_class">
          <el-input v-model="form.customer_class" placeholder="请输入合作品类"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产能占比(%)" prop="customer_per">
              <el-input-number
                v-model="form.customer_per"
                :min="0"
                :max="100"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作年限" prop="customer_time">
              <el-input-number v-model="form.customer_time" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="客户品牌" prop="customer_pin_pai">
          <el-input v-model="form.customer_pin_pai" placeholder="请输入客户品牌"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="线上订单占比(%)" prop="order_line_per">
              <el-input-number
                v-model="form.order_line_per"
                :min="0"
                :max="100"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线下订单占比(%)" prop="order_off_line_per">
              <el-input-number
                v-model="form.order_off_line_per"
                :min="0"
                :max="100"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="单笔订单最低数" prop="order_min_num">
          <el-input-number v-model="form.order_min_num" :min="0" :controls="false"></el-input-number>
        </el-form-item>
      </el-card>

      <!-- 交付信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>交付信息</span>
        </div>
        <el-form-item label="交付商品名" prop="jiao_fu_goods_name">
          <el-input v-model="form.jiao_fu_goods_name" placeholder="请输入交付商品名称"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交付商品数" prop="jiao_fu_goods_num">
              <el-input-number v-model="form.jiao_fu_goods_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交付商品周期" prop="jiao_fu_goods_time">
              <el-input v-model="form.jiao_fu_goods_time" placeholder="请输入交付周期"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 铺货信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>铺货信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铺货线上平台数量" prop="pu_goods_line_num">
              <el-input-number v-model="form.pu_goods_line_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铺货线下平台数量" prop="pu_goods_off_line_num">
              <el-input-number v-model="form.pu_goods_off_line_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铺货门店数量" prop="pu_goods_shop_num">
              <el-input-number v-model="form.pu_goods_shop_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铺货经销商数量" prop="pu_goods_sale_num">
              <el-input-number v-model="form.pu_goods_sale_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铺货代理商数量" prop="pu_goods_agent_num">
              <el-input-number v-model="form.pu_goods_agent_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="平台入驻平台" prop="pu_goods_web">
          <el-input v-model="form.pu_goods_web" placeholder="请输入入驻平台名称"></el-input>
        </el-form-item>
      </el-card>

      <!-- 销售信息 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>销售信息</span>
        </div>
        <el-form-item label="年销售额(万元)" prop="sale_amount">
          <el-input-number v-model="form.sale_amount" :min="0" :controls="false"></el-input-number>
        </el-form-item>

        <el-form-item label="主营产品" prop="main_goods_name">
          <el-input v-model="form.main_goods_name" placeholder="请输入主营产品"></el-input>
        </el-form-item>

        <el-form-item label="主营产品数量" prop="main_goods_num">
          <el-input-number v-model="form.main_goods_num" :min="0" :controls="false"></el-input-number>
        </el-form-item>

        <el-form-item label="主营产品来源" prop="main_goods_source">
          <el-input v-model="form.main_goods_source" placeholder="请输入主营产品来源"></el-input>
        </el-form-item>
      </el-card>

      <!-- 仓储物流 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>仓储物流</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓储类型" prop="cang_ku_type">
              <el-radio-group v-model="form.cang_ku_type">
                <el-radio :label="1">租赁</el-radio>
                <el-radio :label="2">自有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库面积(㎡)" prop="cang_ku_area">
              <el-input-number v-model="form.cang_ku_area" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库有效期开始" prop="cang_ku_from_date">
              <el-date-picker
                v-model="form.cang_ku_from_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库有效期结束" prop="cang_ku_to_date">
              <el-date-picker
                v-model="form.cang_ku_to_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库覆盖网点" prop="cang_ku_dian_num">
              <el-input-number v-model="form.cang_ku_dian_num" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="情况说明" prop="cang_ku_note">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.cang_ku_note"
            placeholder="请输入仓储情况说明"
          ></el-input>
        </el-form-item>

        <el-form-item label="进出台账" prop="cang_ku_zhang">
          <el-input v-model="form.cang_ku_zhang" placeholder="请输入进出台账情况"></el-input>
        </el-form-item>

        <el-form-item label="配送方式" prop="send_type">
          <el-input v-model="form.send_type" placeholder="请输入配送方式"></el-input>
        </el-form-item>

        <el-form-item label="物流合作商" prop="send_name">
          <el-input v-model="form.send_name" placeholder="请输入物流合作商"></el-input>
        </el-form-item>
      </el-card>

      <!-- 售后服务 -->
      <el-card shadow="hover" class="form-section">
        <div slot="header" class="clearfix">
          <span>售后服务</span>
        </div>
        <el-form-item label="售后服务保障" prop="service_bao_zhang">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.service_bao_zhang"
            placeholder="请输入售后服务保障内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否支持账期" prop="service_zhang_qi">
          <el-input v-model="form.service_zhang_qi" placeholder="请输入是否支持账期"></el-input>
        </el-form-item>

        <el-form-item label="结算方式" prop="service_pay_type">
          <el-input v-model="form.service_pay_type" placeholder="请输入结算方式"></el-input>
        </el-form-item>

        <el-form-item label="代理采购能力" prop="service_agent_cai">
          <el-input v-model="form.service_agent_cai" placeholder="请输入代理采购能力"></el-input>
        </el-form-item>
      </el-card>

      <!-- 表单操作 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('companyForm')">提交</el-button>
        <el-button @click="resetForm('companyForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import area from '/src/data/city.json'

export default {
  name: 'CompanyForm',
  data() {
    return {
      form: {
        user_company_id: 0,
        creator_id: 0,
        created_at: 0,
        updated_at: 0,
        deleted_at: 0,
        company_name: '',
        report_no: '',
        report_time: 0,
        staff_num: 0,
        device_num: 0,
        designer_num: 0,
        area: 0,
        tax_type: 1,
        reg_money: 0.00,
        reg_area_code: '',
        reg_address: '',
        reg_org: '',
        reg_from_date: null,
        reg_to_date: null,
        reg_no: '',
        reg_person: '',
        reg_fan_wei: '',
        manager_num: 0,
        sale_num: 0,
        make_num: 0,
        department: '',
        company_content: '',
        company_mission: '',
        goods_img: '',
        manage_type: 1,
        manage_img: '',
        manage_place_area: 0,
        manage_place_type: 1,
        manage_place_code: '',
        manage_place_address: '',
        make_type: 1,
        make_img: null,
        make_place_type: 1,
        make_place_code: null,
        make_place_address: null,
        normal_device_num: 0,
        other_device_num: 0,
        power_wai_mao: null,
        power_pin_pai: null,
        power_dai_gong_pin_pai: null,
        power_dai_gong_pin_pai_msg: null,
        dai_gong_type: null,
        dai_gong_make_type: null,
        develop_design: null,
        develop_new_num: 0,
        develop_1_5_num: null,
        develop_6_10_num: null,
        develop_10_99_num: null,
        da_yang_can: null,
        da_yang_time: null,
        da_yang_person: 0,
        zhi_liang_check: null,
        zhi_liang_check_type: 1,
        making_line_num: null,
        making_year_num: null,
        making_wei_sheng: null,
        making_zhao_ming: null,
        making_gong_yi: null,
        customer_name: null,
        customer_name_type: 0,
        customer_class: null,
        customer_per: 0,
        customer_time: null,
        customer_pin_pai: null,
        order_line_per: null,
        order_off_line_per: null,
        order_min_num: null,
        jiao_fu_goods_name: null,
        jiao_fu_goods_num: null,
        jiao_fu_goods_time: null,
        pu_goods_line_num: null,
        pu_goods_off_line_num: null,
        pu_goods_shop_num: null,
        pu_goods_sale_num: null,
        pu_goods_agent_num: null,
        pu_goods_web: '',
        sale_amount: 0,
        main_goods_name: null,
        main_goods_num: null,
        main_goods_source: null,
        cang_ku_type: 1,
        cang_ku_to_date: null,
        cang_ku_from_date: null,
        cang_ku_area: null,
        cang_ku_dian_num: null,
        cang_ku_note: null,
        cang_ku_zhang: null,
        send_type: null,
        send_name: null,
        service_bao_zhang: null,
        service_zhang_qi: null,
        service_pay_type: null,
        service_agent_cai: null
      },
      rules: {
        // company_name: [
        //   { required: true, message: '请输入公司名称', trigger: 'blur' }
        // ],
        // // report_no: [
        // //   { required: true, message: '请输入报告编号', trigger: 'blur' }
        // // ],
        // reg_money: [
        //   { required: true, message: '请输入注册资金', trigger: 'blur' }
        // ],
        // reg_area_code: [
        //   { required: true, message: '请选择注册地区', trigger: 'change' }
        // ],
        // reg_address: [
        //   { required: true, message: '请输入注册地址', trigger: 'blur' }
        // ],
        // reg_no: [
        //   { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        // ],
        // reg_person: [
        //   { required: true, message: '请输入注册法人', trigger: 'blur' }
        // ],
        // staff_num: [
        //   { required: true, message: '请输入员工人数', trigger: 'blur' }
        // ]
      },
      areaOptions: area,

      // // 配置为只返回value
      // cascaderProps: {
      //   value: 'code',
      //   label: 'name',
      //   children: 'children',
      //   emitPath: true // 返回完整路径
      //   // 如果只需要最后一级的值，可设置为false
      //   // emitPath: false
      // },

      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    deviceNumTotal() {
      return this.form.normal_device_num + this.form.other_device_num
    }
  },
  watch: {
    'form.normal_device_num': function(newVal) {
      this.form.device_num = this.deviceNumTotal
    },
    'form.other_device_num': function(newVal) {
      this.form.device_num = this.deviceNumTotal
    }
  },
  mounted() {
  },
  methods: {
    regAreaCode(values) {
      this.form.reg_area_code = values
    },
    makePlaceCode(values) {
      this.form.make_place_code = values
    },
    managePlaceCode(values) {
      this.form.manage_place_code = values
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 处理表单提交逻辑

          this.$http({
            url: '/WuZi/save',
            method: 'post'
          }).then(r => {
            // console.log('555')
            // console.log(r.data)
            // this.areaOptions = r.data

          })

          console.log('表单数据:', this.form)
          this.$message({
            message: '提交成功',
            type: 'success'
          })

          // 这里可以添加API调用
          // this.saveCompanyData();
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    saveCompanyData() {
      // 这里添加API调用逻辑
      // 例如:
      // axios.post('/api/company', this.form)
      //   .then(response => {
      //     console.log('保存成功', response);
      //   })
      //   .catch(error => {
      //     console.error('保存失败', error);
      //   });
    }
  }
}
</script>

<style scoped>
.company-form-container {
  padding: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-form-item__content {
  line-height: normal;
}
</style>
